<template>
  <div class="fullscreen-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="header-content">
        <div class="logo">
          <span class="logo-text">应急人员宿舍管理系统</span>
        </div>
      </div>
    </el-header>

    <!-- 主体内容区 -->
    <el-main class="app-main">
      <!-- 图表区域 - 显示在前面 -->
      <el-row :gutter="20" class="chart-row">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="clearfix">
              <span>近7天设备报修量</span>
              <el-select v-model="timeRange" size="small" @change="refreshBarChart">
                <el-option label="近7天" value="7d"></el-option>
                <el-option label="近30天" value="30d"></el-option>
                <el-option label="近90天" value="90d"></el-option>
              </el-select>
            </div>
            <div ref="barChart" class="chart-container"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="clearfix">
              <span>学生居住状态</span>
            </div>
            <div ref="pieChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 应急知识卡片 -->
      <div class="knowledge-container">
        <h2 class="section-title">应急知识</h2>
        <el-row :gutter="20" class="knowledge-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="7" v-for="(knowledge, index) in knowledgeList" :key="index">
            <el-card class="knowledge-card" shadow="hover">
              <img :src="knowledge.imgUrl" alt="应急知识图片" class="card-img">
              <div class="card-content">
                <h3 class="card-title">{{ knowledge.title }}</h3>
                <p class="card-desc">{{ knowledge.description }}</p>
                <el-button type="primary" size="medium" @click="goToDeptWebsite(knowledge.url)">
                  查看详情
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 应急部门链接 -->
      <div class="department-container">
        <h2 class="section-title">应急部门链接</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" v-for="(dept, index) in departmentLinks" :key="index">
            <el-card class="dept-card" shadow="hover">
              <div class="dept-icon">
                <i :class="dept.icon"></i>  <!-- 动态绑定图标 -->
              </div>
              <div class="dept-content">
                <h3 class="dept-title">{{ dept.name }}</h3>
                <p class="dept-desc">{{ dept.description }}</p>
                <el-button type="text" @click="goToDeptWebsite(dept.url)">
                  访问网站 <i class="el-icon-arrow-right"></i>
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getBarChartData as fetchBarChartData, getPieChartData as fetchPieChartData } from '@/api/chart'

export default {
  name: 'FullscreenHome',
  data() {
    return {
      // 页面布局相关
      timeRange: '7d',
      residenceType: 'dormType',
      currentPage: 1,
      pageSize: 10,

      // 数据统计
      studentTotal: 81,
      dormitoryTotal: 26,
      progressColor: '#67c23a',

      // 图表数据
      barChartData: [],
      pieChartData: [],

      // 应急知识卡片数据
      knowledgeList: [
        {
          id: 1,
          title: '火灾逃生指南',
          imgUrl: require('@/assets/images/VCG211483057813.webp'),
          description: '了解火灾发生时的正确逃生方法和注意事项，提高自我保护能力。',
          url: 'https://www.119.gov.cn/kp/zjts/2022/191.shtml'
        },
        {
          id: 2,
          title: '地震应急知识',
          imgUrl: require('@/assets/images/VCG211483057785.webp'),
          description: '学习地震发生时室内外的避险技巧，掌握基本的自救互救方法。',
          url: 'https://www.mem.gov.cn/kp/zrzh/201902/t20190226_366163.shtml'
        },
        {
          id: 3,
          title: '急救技能培训',
          imgUrl: require('@/assets/images/VCG211557960844.webp'),
          description: '掌握心肺复苏、止血包扎等基本急救技能，在紧急情况下挽救生命。',
          url: 'https://app.people.cn/h5/detail/normal/5271582166057984'
        }
      ],

      // 应急部门链接数据
      departmentLinks: [
        {
          name: '国家应急管理部',
          icon: 'el-icon-office-building',
          description: '国家应急管理部官方网站，提供权威的应急管理信息和政策。',
          url: 'https://www.mem.gov.cn/'
        },
        {
          name: '中国红十字会',
          icon: 'el-icon-suitcase',
          description: '中国红十字会官方网站，提供急救知识培训和灾害救援信息。',
          url: 'https://www.redcross.org.cn/'
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initBarChart();
      this.initPieChart();
      window.addEventListener('resize', this.resizeCharts);
      this.checkEmergencyNotice();
      this.getBarChartData(this.timeRange);
      this.getPieChartData(this.residenceType);
    });
  },
  methods: {
    // 初始化柱状图
    initBarChart() {
      const chartDom = this.$refs.barChart;
      if (chartDom) {
        this.barChart = echarts.init(chartDom);
        const defaultOption = {
          color: ['#409eff'],
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: { type: 'category', data: [] },
          yAxis: { type: 'value', max: 5 },
          series: [{ name: '报修量', type: 'bar', data: [] }]
        };
        this.barChart.setOption(defaultOption);
      }
    },

    // 初始化饼图
    initPieChart() {
      const chartDom = this.$refs.pieChart;
      if (chartDom) {
        this.pieChart = echarts.init(chartDom);
        const defaultOption = {
          tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: []
          },
          series: [{
            name: '学生居住状态统计',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        this.pieChart.setOption(defaultOption);
      }
    },

    // 更新柱状图
    updateBarChart() {
      const xData = this.barChartData.map(item => item.date);
      const yData = this.barChartData.map(item => item.value);
      const option = {
        xAxis: { data: xData },
        series: [{ data: yData }]
      };
      this.barChart.setOption(option);
    },

    // 更新饼图
    updatePieChart() {
      const data = this.pieChartData.map(item => ({
        name: item.name,
        value: item.value
      }));
      const option = {
        series: [{ data }]
      };
      this.pieChart.setOption(option);
    },

    // 获取柱状图数据
    async getBarChartData(timeRange) {
      try {
        const res = await fetchBarChartData(timeRange);
        if (Array.isArray(res.data)) {
          this.barChartData = res.data.map(item => ({
            date: item.date || '',
            value: item.value || 0
          }));
          this.updateBarChart();
        }
      } catch (error) {
        console.error('获取报修数据失败：', error);
      }
    },

    // 获取饼图数据
    async getPieChartData() {
      try {
        const res = await fetchPieChartData();
        if (Array.isArray(res.data)) {
          this.pieChartData = res.data.map(item => ({
            name: item.name === '1' ? '在宿' : item.name === '0' ? '退宿' : item.name,
            value: item.value
          }));
          this.updatePieChart();
        }
      } catch (error) {
        console.error('获取居住状态数据失败：', error);
      }
    },

    // 刷新图表
    refreshBarChart() {
      this.getBarChartData(this.timeRange);
    },
    refreshPieChart() {
      this.getPieChartData(this.residenceType);
    },

    // 应急通知检查
    checkEmergencyNotice() {
      console.log('Checking emergency notice...');
    },

    // 访问部门网站
    goToDeptWebsite(url) {
      window.open(url, '_blank');
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全屏容器样式 */
.fullscreen-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.app-header {
  background-color: #185072;
  color: white;
  height: 60px !important;
  line-height: 60px;
  padding: 0 20px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 20px;
  font-weight: bold;
}

/* 主内容区样式 */
.app-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #f5f7fa;
}

/* 图表区域样式 */
.chart-row {
  margin-top: 20px;
}
.chart-card {
  height: 400px;
}
.chart-container {
  height: 340px;
}

/* 分区标题 */
.section-title {
  font-size: 24px;
  font-weight: bold;
  margin: 30px 0 20px;
  color: #1D2129;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E6EB;
}

/* 知识卡片容器 */
.knowledge-container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}
.knowledge-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* 知识卡片样式 */
.knowledge-card {
  height: 100%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}
.card-content {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc {
  flex: 1;
  color: #666;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 按钮样式 */
.el-button--primary {
  padding: 10px 20px;
  font-size: 16px;
}

/* 部门卡片样式 */
.department-container {
  width: 100%;
  overflow: hidden;
}
.dept-card {
  height: 180px;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}
.dept-icon {
  font-size: 48px;
  color: #185072;
  margin-right: 20px;
}
.dept-content {
  flex: 1;
}
.dept-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.dept-desc {
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .app-header {
    padding: 0 10px;
  }
  .logo {
    font-size: 18px;
  }
  .section-title {
    font-size: 20px;
  }
  .knowledge-card {
    min-height: 300px;
  }
  .card-img {
    height: 150px;
  }
  .el-button--primary {
    padding: 8px 16px;
    font-size: 14px;
  }
  .chart-card {
    height: 350px;
  }
  .chart-container {
    height: 290px;
  }
}
</style>
